<template>
  <div class="login" :style="{ background: 'url(' + bg + ') no-repeat' }">
    <hry-header
      title=""
      :showBackBtn="true"
      :needBackground="false"
      backRouterName="home"
    >
      <div slot="content" class="normal-wrapper">
        <md-scroll-view
          ref="scrollView"
          :scrolling-x="false"
          :auto-reflow="true"
        >
          <img src="@/assets/img/logo_01.png" alt="" />
          <div class="form-wrapper">
            <div class="login-title">
              <span class="active">登录</span> /
              <span class="normal" @click="$commonJs.goPage('register')"
                >注册</span
              >
            </div>
            <form novalidate @submit.prevent="validateBeforeSubmit">
              <div>
                <md-field>
                  <input-validate
                    v-model="formData.mobile"
                    placeholder="请输入您的手机号"
                    v-validate="'required|mobile'"
                    name="mobile"
                    type="phone"
                    icon="iconshouji1"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="您的手机号"
                    :error="errors.first('mobile')"
                  >
                  </input-validate>
                  <input-validate
                    v-model="formData.password"
                    placeholder="输入您的密码"
                    type="password"
                    icon="iconmima"
                    name="password"
                    v-validate="'required'"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="您的密码"
                    :error="errors.first('password')"
                  >
                  </input-validate>
                  <input-validate
                    v-model="formData.code"
                    placeholder="输入您的图形验证码"
                    type="digit"
                    name="code"
                    rightType="1"
                    :imgUrl="imgUrl"
                    v-validate="'required|max:4'"
                    icon="iconyanzhengma1"
                    data-vv-value-path="innerValue"
                    data-vv-validate-on="input"
                    data-vv-as="图形验证码"
                    :error="errors.first('code')"
                    @changeImg="getImgCode"
                  >
                  </input-validate>
                </md-field>
              </div>
              <div class="forget">
                <a href="javaScript:(0)" @click="$commonJs.goPage('forgetPsw')"
                  >忘记密码?</a
                >
              </div>
              <div class="login-btn">
                <a-button type="primary" block html-type="submit"
                  >登 录</a-button
                >
              </div>
            </form>
          </div>
          <div class="agree">
            <a-checkbox :checked="isChecked" @change="changeChecked">
              <span class="agree_link"
                >我已同意<a
                  href="javaScript:(0)"
                  @click="agreement('user', '用户注册服务协议')"
                  >《用户注册服务协议》 </a
                ><a
                  href="javaScript:(0)"
                  @click="agreement('service', '投资人服务协议')"
                  >《投资人服务协议》 </a
                ><a
                  href="javaScript:(0)"
                  @click="agreement('tzfx', '投资风险提示书')"
                >
                  《投资风险提示书》 </a
                ><a
                  href="javaScript:(0)"
                  @click="agreement('dzxy', '电子签名授权协议')"
                >
                  《电子签名授权协议》 </a
                ><a
                  href="javaScript:(0)"
                  @click="agreement('wtkj', '委托快捷签署协议')"
                >
                  《委托快捷签署协议》
                </a></span
              ></a-checkbox
            >
          </div>
        </md-scroll-view>
      </div>
    </hry-header>
    <a-modal
      width="80%"
      height="80%"
      :title="title"
      :visible="visible"
      onOk="handleOk"
      @cancel="handleOk"
    >
      <agreement :type="type"></agreement>
      <template slot="footer">
        <a-button key="submit" type="primary" @click="handleOk">
          关闭
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import bg from "@/assets/img/login_bg.png";
import { ScrollView, Field } from "mand-mobile";
import "@/assets/fonticon/iconfont.css";
import inputValidate from "@/components/input-validate/index";
import validate from "@/tool/validateFunction";
validate.mobile("mobile", "请输入正确的手机号");
export default {
  name: "",
  components: {
    [ScrollView.name]: ScrollView,
    inputValidate,
    hryHeader: () => import("@/components/contentWrapper/index"),
    [Field.name]: Field,
    agreement: () => import("@/components/commonAgreement/index")
  },
  data() {
    return {
      bg: bg,
      visible: false,
      type: "",
      title: "",
      isChecked: true,
      formData: {
        mobile: "",
        password: "",
        code: ""
      },
      imgUrl: ""
    };
  },
  created() {
    this.getImgCode();
  },
  methods: {
    changeChecked(e) {
      this.isChecked = e.target.checked;
    },
    getImgCode() {
      this.$ajax
        .post(this.$api.getImgCode, false, true)
        .then(res => {
          this.imgUrl = res.code;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    handleOk() {
      this.visible = false;
    },
    agreement(type, title) {
      this.title = title;
      this.type = type;
      this.visible = true;
    },
    validateBeforeSubmit() {
      this.$validator.validate().then(result => {
        if (result) {
          if (this.isChecked) {
            this.$ajax
              .post(this.$api.login, this.formData, false, "登录中")
              .then(res => {
                this.$message.success("登录成功！");
                this.$store.dispatch("resetState");
                localStorage.setItem("mtoken", this.$crypto.setAES(res.token));
                this.$store.dispatch("changeLoginStatus", true);
                this.$store.dispatch("changeValidate", res.is_check);
                this.$store.dispatch("changeMobile", res.mobile);
                this.$store.dispatch("changeMemberType", res.member_type);
                this.$router.push({ name: "home" });
              })
              .catch(err => {
                this.$message.error(err);
              });
          } else {
            this.$message.error("尚未同意协议");
          }
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.login {
  height: 100%;
  width: 100%;
  background-size: 100%, 100% !important;
  .normal-wrapper {
    height: 100%;
    width: 100%;
    padding: 0 20px 0 20px;
    text-align: center;
    img {
      margin-top: 20px;
      margin-bottom: 40px;
    }
    .form-wrapper {
      position: relative;
      text-align: left;
      margin: 10px 20px 62px 20px;
      padding: 30px 34px;
      background: @white;
      border-radius: 5px;
      box-shadow: 2px 2px 10px rgba(254, 226, 212, 1);
      .iconfont {
        .linear_gradient_back(#fad683, #f8962d, #ef8028);
        font-size: 36px;
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
      .login-title {
        font-size: 30px;
        margin-bottom: 34px;
        .active {
          color: #3e4a59;
          font-size: 48px;
        }
        .normal {
          color: #cdcdcd;
        }
      }
      .forget {
        margin: 58px 0 51px 0;
        text-align: right;
        a {
          font-size: 25px;
        }
      }
      .login-btn {
        position: absolute;
        width: calc(100% - 70px);
        .ant-btn {
          height: 75px;
          font-size: 30px;
        }
      }
    }
    .agree {
      width: calc(100% - 160px);
      text-align: center;
      margin: 0 auto;
      font-size: 18px;
      a {
        font-size: 18px;
      }
    }
  }
}
</style>
